import React from 'react';
import { NavLink } from 'react-router-dom';

import './Tabbar.css';

export default function Tabbar() {
  return (
    <ul className="tabbar">
      <li>
        <NavLink
          to="/film"
          className={(active) => {
            return active.isActive ? 'my-active' : '';
          }}
        >
          电影
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/cinema"
          className={(active) => {
            return active.isActive ? 'my-active' : '';
          }}
        >
          影院
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/center"
          className={(active) => {
            return active.isActive ? 'my-active' : '';
          }}
        >
          我的
        </NavLink>
      </li>
    </ul>
  );
}
